<!DOCTYPE html>
<html>

<head>
    <title>${systemName}</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/assets/module/admin.css?v=318"/>
    <script src="${ctxPath}/assets/common/module/sweetalert/sweetalert.min.js"></script>
</head>
<style>
    .numberInfoSubTitle {
        color: rgba(0, 0, 0, .45);
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
    }

    .numberInfoValue {
        color: rgba(0, 0, 0, .85);
        font-size: 24px;
        margin-top: 10px;
        height: 32px;
        line-height: 32px;
    }

    .numberInfoSuffix {
        color: rgba(0, 0, 0, .65);
        font-size: 16px;
        font-style: normal;
        margin-left: 4px;
        line-height: 32px;
    }
</style>
<style>
    /** 统计快捷方式样式 */
    .console-link-block {
        font-size: 14px;
        padding: 20px 20px;
        border-radius: 4px;
        background-color: #40D4B0;
        color: #FFFFFF !important;
        box-shadow: 0 2px 3px rgba(69, 74, 101, 0.19);
        position: relative;
        overflow: hidden;
        display: block;
    }
    .console-user-group {
        position: relative;
        padding: 7px 0 10px 60px;
    }
    .console-link-block .console-link-block-num {
        font-size: 16px;
        margin-bottom: 10px;
        opacity: .9;
    }

    .layui-col-md2 {
        width: 14.25555% !important;
    }
    .lay-big-font {
        font-size: 22px;
        line-height: 36px;
        padding: 5px 0 10px;
        overflow: hidden;
        white-space: nowrap;
        word-break: break-all;
        text-overflow: ellipsis;
    }
    .lay-big-font {
        font-size: 22px;
        color: #324296;
        line-height: 36px;
        padding: 5px 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }

    .ew-console-wrapper .layui-card {
        box-shadow: none;
        border-radius: 0px;
    }

    .console-link-block .console-link-block-text {
        opacity: .8;
    }

    .console-link-block .console-link-block-icon {
        position: absolute;
        top: 50%;
        right: -8px;
        width: 50px;
        height: 50px;
        font-size: 22px;
        line-height: 50px;
        margin-top: -2px;
        color: #FFFFFF;
        opacity: .8;
    }

    .console-link-block .console-link-block-band {
        color: #fff;
        width: 100px;
        font-size: 12px;
        padding: 2px 0 3px 0;
        background-color: #E32A16;
        line-height: inherit;
        text-align: center;
        position: absolute;
        top: 8px;
        right: -30px;
        transform-origin: center;
        transform: rotate(45deg) scale(.8);
        opacity: .95;
        z-index: 2;
    }

    /** //统计快捷方式样式 */

    /** 设置每个快捷块的颜色 */
    .layui-row > div:nth-child(2) .console-link-block {
        background-color: #55A5EA;
    }

    .layui-row > div:nth-child(3) .console-link-block {
        background-color: #9DAFFF;
    }

    .layui-row > div:nth-child(4) .console-link-block {
        background-color: #F591A2;
    }

    .layui-row > div:nth-child(5) .console-link-block {
        background-color: #FEAA4F;
    }

    .layui-row > div:last-child .console-link-block {
        background-color: #9BC539;
    }
</style>

<style>
    /** 应用快捷块样式 */
    .console-app-group {
        padding: 16px;
        border-radius: 4px;
        text-align: center;
        background-color: #fff;
        cursor: pointer;
        display: block;
    }

    .console-app-group .console-app-icon {
        width: 32px;
        height: 32px;
        line-height: 32px;
        margin-bottom: 6px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 32px;
        color: #69c0ff;
    }

    .console-app-group:hover {
        box-shadow: 0 0 15px rgba(0, 0, 0, .08);
    }

    /** //应用快捷块样式 */

    /** 小组成员 */
    .console-user-group {
        position: relative;
        padding: 10px 0 10px 60px;
    }

    .console-user-group .console-user-group-head {
        width: 32px;
        height: 32px;
        position: absolute;
        top: 50%;
        left: 12px;
        margin-top: -16px;
        border-radius: 50%;
    }

    .console-user-group .layui-badge {
        position: absolute;
        top: 50%;
        right: 8px;
        margin-top: -10px;
    }

    .console-user-group .console-user-group-name {
        line-height: 1.2;
    }

    .console-user-group .console-user-group-desc {
        color: #8c8c8c;
        line-height: 1;
        font-size: 12px;
        margin-top: 5px;
    }

    /** 卡片轮播图样式 */
    .admin-carousel .layui-carousel-ind {
        position: absolute;
        top: -41px;
        text-align: right;
    }

    .admin-carousel .layui-carousel-ind ul {
        background: 0 0;
    }

    .admin-carousel .layui-carousel-ind li {
        background-color: #e2e2e2;
    }

    .admin-carousel .layui-carousel-ind li.layui-this {
        background-color: #999;
    }

    /** 广告位轮播图 */
    .admin-news .layui-carousel-ind {
        height: 45px;
    }

    .admin-news a {
        display: block;
        line-height: 70px;
        text-align: center;
    }

    /** 最新动态时间线 */
    .layui-timeline-dynamic .layui-timeline-item {
        padding-bottom: 0;
    }

    .layui-timeline-dynamic .layui-timeline-item:before {
        top: 16px;
    }

    .layui-timeline-dynamic .layui-timeline-axis {
        width: 9px;
        height: 9px;
        left: 1px;
        top: 7px;
        background-color: #cbd0db;
    }

    .layui-timeline-dynamic .layui-timeline-axis.active {
        background-color: #0c64eb;
        box-shadow: 0 0 0 2px rgba(12, 100, 235, .3);
    }

    .dynamic-card-body {
        box-sizing: border-box;
        overflow: hidden;
    }

    .dynamic-card-body:hover {
        overflow-y: auto;
        padding-right: 9px;
    }

    /** 优先级徽章 */
    .layui-badge-priority {
        border-radius: 50%;
        width: 20px;
        height: 20px;
        padding: 0;
        line-height: 18px;
        border-width: 2px;
        font-weight: 600;
    }
</style>
<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="rubik-loader"></div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
    <!-- 快捷方式 -->
    <div class="layui-row layui-col-space15">

<!--        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">-->
<!--            <div class="console-link-block" style="background-color: #2d8cf0d6;">-->
<!--                <div class="console-link-block-num"><sp class="walletConvert">943261.81</sp></div>-->
<!--                <div class="console-link-block-text">我的钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>-->
<!--                <i class="console-link-block-icon layui-icon layui-icon-cart"></i>-->
<!--                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
            <div class="console-link-block" style="background-color: #874dd8db;">
                <div class="console-link-block-num"><sp id="currencyConvert">?</sp></div>
                <div class="console-link-block-text">币币钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>
                <i class="console-link-block-icon layui-icon layui-icon-dollar"></i>
                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>
            </div>
        </div>

<!--        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">-->
<!--            <div class="console-link-block" style="background-color: #e6a33f;">-->
<!--                <div class="console-link-block-num"><sp id="legalConvert">67930.65</sp></div>-->
<!--                <div class="console-link-block-text">法币钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>-->
<!--                <i class="console-link-block-icon layui-icon layui-icon-auz"></i>-->
<!--                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">-->
<!--            <div class="console-link-block" style="background-color: #4caf50bf;">-->
<!--                <div class="console-link-block-num"><sp class="contractConvert">846196.97</sp></div>-->
<!--                <div class="console-link-block-text">永续钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>-->
<!--                <i class="console-link-block-icon layui-icon layui-icon-rmb"></i>-->
<!--                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">-->
<!--            <div class="console-link-block" style="background-color: #2540d8ab;">-->
<!--                <div class="console-link-block-num"><sp id="optionConvert">493793.18</sp></div>-->
<!--                <div class="console-link-block-text">期权钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>-->
<!--                <i class="console-link-block-icon layui-icon layui-icon-diamond"></i>-->
<!--                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">-->
<!--            <div class="console-link-block" style="background-color: #40D4B0;">-->
<!--                <div class="console-link-block-num"><sp class="walletConvert">795119.36</sp></div>-->
<!--                <div class="console-link-block-text">理财钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>-->
<!--                <i class="console-link-block-icon layui-icon layui-icon-fire"></i>-->
<!--                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">-->
<!--            <div class="console-link-block" style="background-color: #f443369e;">-->
<!--                <div class="console-link-block-num"><sp class="contractConvert">697365.81</sp></div>-->
<!--                <div class="console-link-block-text">矿机钱包<span style="font-size: 12px;color: #ffffff;font-weight: 700;"> USDT</span></div>-->
<!--                <i class="console-link-block-icon layui-icon layui-icon-water"></i>-->
<!--                <div class="console-link-block-band layui-btn layui-btn-xs">服务中</div>-->
<!--            </div>-->
<!--        </div>-->

        <!--顶部结束-->

        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日充值<span class="layui-badge layui-badge-green pull-right">充币信息</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font" id="rechargeSum">?</p>
                    <p>本周充币<span class="pull-right" id="weekRechargeSum">? USDT</span></p>
                </div>
            </div>
        </div>
<!--        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">-->
<!--                    买入数量<span class="layui-badge layui-badge-blue pull-right">法币交易</span>-->
<!--                </div>-->
<!--                <div class="layui-card-body">-->
<!--                    <p class="lay-big-font" id="otcBuy">216,3175</p>-->
<!--                    <p>卖出数量<span class="pull-right" id="otcSell">? USDT</span></p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    买入数量<span class="layui-badge layui-badge-red pull-right">币币交易</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font" id="buyMatch">531,269</p>
                    <p>卖出数量<span class="pull-right" id="sellMatch">? USDT</span></p>
                </div>
            </div>
        </div>
<!--        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">-->
<!--                    商家人数-->
<!--                    <span class="icon-text pull-right" lay-tips="法币商家" lay-direction="4" lay-offset="5px,5px">-->
<!--                        <i class="layui-icon layui-icon-tips"></i>-->
<!--                    </span>-->
<!--                </div>-->
<!--                <div class="layui-card-body">-->
<!--                    <p class="lay-big-font" id="otcCount">283</p>-->
<!--                    <p>二级代理<span class="pull-right" id="memcount2">159</span></p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->




        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    今日提币<span class="layui-badge layui-badge-green pull-right">提币信息</span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font" id="withdrawSum">39,8486</p>
                    <p>本周提币<span class="pull-right" id="weekWithdrawSum">96,3164 USDT</span></p>
                </div>
            </div>
        </div>
<!--        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">-->
<!--                    买入数量<span class="layui-badge layui-badge-blue pull-right">合约交易</span>-->
<!--                </div>-->
<!--                <div class="layui-card-body">-->
<!--                    <p class="lay-big-font" id="buyCompact">631,2369</p>-->
<!--                    <p>卖出数量<span class="pull-right" id="sellCompact">636,4318 USDT</span></p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">-->
<!--            <div class="layui-card">-->
<!--                <div class="layui-card-header">-->
<!--                    已发短信<span class="layui-badge layui-badge-red pull-right">通知条目</span>-->
<!--                </div>-->
<!--                <div class="layui-card-body">-->
<!--                    <p class="lay-big-font" id="smsCount">19,7136</p>-->
<!--                    <p>已发邮箱<span class="pull-right" ><sp id="emailCount">1935</sp> 已发送</span></p>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">
                    用户数量
                    <span class="icon-text pull-right" lay-tips="用户人数" lay-direction="4" lay-offset="5px,5px">
                        <i class="layui-icon layui-icon-tips"></i>
                    </span>
                </div>
                <div class="layui-card-body">
                    <p class="lay-big-font" id="memberY">8162</p>
                    <p>冻结人数<span class="pull-right" id="memberN">21</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 快捷方式 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6" style="padding-bottom: 0;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/member" ew-title="用户管理">
                        <i class="console-app-icon layui-icon layui-icon-group"
                           style="font-size: 26px;padding-top: 3px;margin-right: 6px;"></i>
                        <div class="console-app-name">用户管理</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/domain_config" ew-title="域名">
                        <i class="console-app-icon layui-icon layui-icon-chart" style="color: #95de64;"></i>
                        <div class="console-app-name">域名配置</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/recharge" ew-title="充币">
                        <i class="console-app-icon layui-icon layui-icon-cart" style="color: #ff9c6e;"></i>
                        <div class="console-app-name">充币信息</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/withdraw" ew-title="提币">
                        <i class="console-app-icon layui-icon layui-icon-form"
                           style="color: #b37feb;font-size: 30px;"></i>
                        <div class="console-app-name">提币信息</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6" style="padding-bottom: 0;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/bulletin" ew-title="轮播">
                        <i class="console-app-icon layui-icon layui-icon-picture-fine"
                           style="color: #ffd666;font-size: 34px;"></i>
                        <div class="console-app-name">轮播上传</div>
                    </div>
                </div>
<!--                <div class="layui-col-xs6 layui-col-sm3">-->
<!--                    <div class="console-app-group" ew-href="/sms_config" ew-title="短信">-->
<!--                        <i class="console-app-icon layui-icon layui-icon-email"-->
<!--                           style="color: #5cdbd3;font-size: 36px;"></i>-->
<!--                        <div class="console-app-name">短信配置</div>-->
<!--                    </div>-->
<!--                </div>-->
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/news" ew-title="公告">
                        <i class="console-app-icon layui-icon layui-icon-note"
                           style="color: #ff85c0;font-size: 28px;"></i>
                        <div class="console-app-name">公告管理</div>
                    </div>
                </div>
                <div class="layui-col-xs6 layui-col-sm3">
                    <div class="console-app-group" ew-href="/email_config" ew-title="邮箱">
                        <i class="console-app-icon layui-icon layui-icon-email" style="color: #ffc069;"></i>
                        <div class="console-app-name">邮箱配置</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 正文开始 -->



    <!-- 统计图表 -->
<!--    <div class="layui-row layui-col-space15">-->

<!--        <div class="layui-col-md4 layui-col-sm6">-->
<!--            <div class="layui-card" style="overflow: hidden;">-->
<!--                <div class="layui-card-header">全球指数</div>-->
<!--                <div class="layui-card-body">-->
<!--                    <div id="consoleChartsWeek" style="height: 300px;"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-md4 layui-col-sm6">-->
<!--            <div class="layui-card" style="overflow: hidden;">-->
<!--                <div class="layui-card-header">仪表盘</div>-->
<!--                <div class="layui-card-body">-->
<!--                    <div id="consoleChartsDay" style="height: 300px;"></div>-->
<!--                    <div style="color: #10B4E8;font-size: 18px;position: absolute;bottom: 85px;left: 0;right:0;text-align: center;cursor: pointer;">-->
<!--                        用户统计<i class="layui-icon layui-icon-right" style="font-size: 16px;"></i>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-col-md4 layui-col-sm6">-->
<!--            <div class="layui-card" style="overflow: hidden;">-->
<!--                <div class="layui-card-header">趋势走向</div>-->
<!--                <div class="layui-card-body">-->
<!--                    <div id="consoleChartsMonth" style="height: 300px;"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
</div>



<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>
<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js"></script>




<script>
    layui.use(['layer'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
    });
</script>


<!-- js部分 -->

<script type="text/javascript" src="${ctxPath}/assets/common/libs/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/libs/echarts/china.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/libs/echarts/echarts-wordcloud.min.js"></script>
<script>
    layui.use(['layer','ax'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var $ax = layui.ax;
        console.log("你好")
        $(".USDT").text("币种改写成功")

        var mem = 0;
        var memcount = 0;
        //请求后台页面数据
        var ajax = new $ax(Feng.ctxPath + "/welcome/info", function (data) {
            $(".walletConvert").text(data.walletConvert)
            $(".contractConvert").text(data.contractConvert)

            $("#buyCompact").text(data.buyCompact)
            $("#buyMatch").text(data.buyMatch)
            $("#currencyConvert").text(data.currencyConvert)
            $("#emailCount").text(data.emailCount==""?'0':data.emailCount)
            $("#legalConvert").text(data.legalConvert)
            $("#memberN").text(data.memberN == ""?"0":data.memberN)
            $("#memberY").text(data.memberY)
            $("#optionConvert").text(data.optionConvert)
            $("#otcBuy").text(data.otcBuy)
            $("#otcSell").text(data.otcSell)
            $("#rechargeSum").text(data.rechargeSum)
            $("#sellCompact").text(data.sellCompact)
            $("#sellMatch").text(data.sellMatch)
            $("#smsCount").text(data.smsCount==""?"0":data.smsCount)
            $("#weekRechargeSum").text(data.weekRechargeSum)
            $("#weekWithdrawSum").text(data.weekWithdrawSum)
            $("#withdrawSum").text(data.withdrawSum)
            $("#otcCount").text(data.otcCount)
            $("#memcount2").text(data.memcount2)

            mem = data.memberY;
            memcount = data.memcount;


        }, function (data) {
            Feng.error("删除失败!" + data.responseJSON.message + "!");
        });
        ajax.set("type", "USDT");
        ajax.start();





        /** 渲染日统计图表 */
        var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
        var options1 = {
            title: {
                text: '总代人数 / 会员数量', x: 'center', y: '32%',
                textStyle: {fontSize: 16, color: '#673AB7', fontWeight: 'normal'},
                subtextStyle: {fontSize: 28, color: '#9dafff'}, itemGap: 20
            },
            color: ['#f3a959', '#E0E0E0'],
            tooltip: {trigger: 'item'},
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                data: ['涨盘', '跌盘'], textStyle: {color: '#595959'}
            },
            series: [{name: '会员', type: 'pie', radius: ['75%', '80%'], label: {normal: {show: false}}}]
        };
        myCharts1.setOption(options1);
        // 赋值
        myCharts1.setOption({
            title: {subtext: memcount+'/'+mem}, series: [{data: [{name: '代理', value: memcount}, {name: '其他', value: mem-memcount}]}]
        });

        /** 渲染周统计图表 */
        var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek'));
        var options2 = {
            tooltip: {trigger: 'axis', axisPointer: {lineStyle: {color: '#E0E0E0'}}},
            color: ['#53b987', '#eb4d5c'],
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                data: ['高度', '深度'], textStyle: {color: '#595959'}
            },
            grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
            xAxis: {
                name: '方向',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五'],
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {color: '#8c8c8c'},
                axisTick: {alignWithLabel: true}
            },
            yAxis: {
                name: '指数',
                nameTextStyle: {color: '#595959'},
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {show: false},
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {color: '#8c8c8c'},
                splitLine: {show: false},
                splitArea: {show: false},
                minInterval: 1
            },
            series: [{
                name: '高度', type: 'bar', stack: 'one', barMaxWidth: '30px',
                label: {normal: {show: true, position: 'inside'}}
            }, {
                name: '深度', type: 'bar', stack: 'one', barMaxWidth: '30px',
                label: {normal: {show: true, position: 'inside'}}
            }]
        };
        myCharts2.setOption(options2);
        // 赋值
        myCharts2.setOption({series: [{data: [5, 9, 6, 3, 10]}, {data: [10, 6, 9, 12, 5]}]});

        /** 渲染月统计图表 */
        var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
        var options3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {lineStyle: {color: '#E0E0E0'}},
                formatter: '{b}号<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#46bb4b;"></span>{a0}: {c0}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FFA800;"></span>{a1}: {c1}'
            },
            color: ['#53b987', '#eb4d5c'],
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                data: ['高度', '深度'], textStyle: {color: '#595959'}
            },
            grid: {top: '75px', left: '35px', right: '55px', bottom: '40px'},
            xAxis: {
                name: '趋势',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {
                    color: '#8c8c8c', interval: function (index, value) {
                        return index === 0 || ((index + 1) % 5 === 0);
                    }
                },
                axisTick: {alignWithLabel: true}
            },
            yAxis: {
                name: '指数',
                nameTextStyle: {color: '#595959'},
                type: 'value',
                boundaryGap: ['0', '20%'],
                axisTick: {show: false},
                axisLine: {lineStyle: {color: '#E0E0E0'}, symbol: ['none', 'arrow'], symbolOffset: [0, 10]},
                axisLabel: {color: '#8c8c8c'},
                splitLine: {show: false},
                splitArea: {show: false},
                minInterval: 1
            },
            series: [
                {name: '高度', type: 'line', smooth: false},
                {name: '深度', type: 'line', smooth: false}
            ]
        };
        myCharts3.setOption(options3);
        // 赋值
        myCharts3.setOption({
            series: [
                {data: [15, 14, 13, 13, 13, 14, 15, 16, 17, 18, 19, 18, 18, 19, 20, 19, 18, 16, 14, 12, 10, 10, 12, 14, 16, 16, 14, 13, 12, 11, 10]},
                {data: [24, 22, 20, 18, 16, 14, 13, 12, 11, 11, 10, 10, 11, 12, 13, 14, 15, 16, 18, 20, 22, 23, 24, 25, 26, 26, 24, 22, 20, 18, 16]}
            ]
        });

        /** 渲染地图图表 */
        var myCharts4 = echarts.init(document.getElementById('consoleChartsMap'));
        var options4 = {
            tooltip: {trigger: 'item'},
            dataRange: {
                min: 0, max: 6e4, text: ['高', '低'], color: ['#2395FF', '#f2f2f2'], itemHeight: 60, itemWidth: 12
            }, series: [{
                name: '用户数量', type: 'map', mapType: "china",
                itemStyle: {normal: {label: {show: true, color: '#262626'}, borderColor: '#dddddd'}},
                emphasis: {label: {show: true, color: '#fff'}, itemStyle: {areaColor: '#FACF20'}},
                top: '0px', left: '15px', bottom: '0px'
            }]
        };
        myCharts4.setOption(options4);
        // 赋值
        myCharts4.setOption({
            series: [{
                data: [
                    {name: "西藏", value: 60},
                    {name: "青海", value: 167},
                    {name: "宁夏", value: 210},
                    {name: "海南", value: 252},
                    {name: "甘肃", value: 502},
                    {name: "贵州", value: 570},
                    {name: "新疆", value: 661},
                    {name: "云南", value: 8890},
                    {name: "重庆", value: 10010},
                    {name: "吉林", value: 5056},
                    {name: "山西", value: 2123},
                    {name: "天津", value: 9130},
                    {name: "江西", value: 10170},
                    {name: "广西", value: 6172},
                    {name: "陕西", value: 9251},
                    {name: "黑龙江", value: 5125},
                    {name: "内蒙古", value: 1435},
                    {name: "安徽", value: 9530},
                    {name: "北京", value: 51919},
                    {name: "福建", value: 3756},
                    {name: "上海", value: 59190},
                    {name: "湖北", value: 37109},
                    {name: "湖南", value: 8966},
                    {name: "四川", value: 31020},
                    {name: "辽宁", value: 7222},
                    {name: "河北", value: 3451},
                    {name: "河南", value: 9693},
                    {name: "浙江", value: 62310},
                    {name: "山东", value: 39231},
                    {name: "江苏", value: 35911},
                    {name: "广东", value: 55891}
                ]
            }]
        });

        /** 渲染词云图表 */
        var myCharts5 = echarts.init(document.getElementById('consoleChartsWord'));
        var options5 = {
            tooltip: {show: true},
            series: [{
                name: "搜索量",
                type: 'wordCloud',
                shape: 'diamond',
                width: '100%',
                height: '100%',
                sizeRange: [12, 23],
                gridSize: 6,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {shadowBlur: 10, shadowColor: '#666'}
                }, data: []
            }]
        };
        myCharts5.setOption(options5);
        // 赋值
        myCharts5.setOption({
            series: [{
                data: [
                    {name: "软妹子", value: 23},
                    {name: "汪星人", value: 23},
                    {name: "长腿欧巴", value: 23},
                    {name: "萝莉", value: 22},
                    {name: "辣~", value: 22},
                    {name: "K歌", value: 22},
                    {name: "大长腿", value: 21},
                    {name: "川妹子", value: 21},
                    {name: "女神", value: 21},
                    {name: "米粉", value: 20},
                    {name: "专注设计", value: 20},
                    {name: "逛街", value: 20},
                    {name: "黑长直", value: 20},
                    {name: "海纳百川", value: 19},
                    {name: "萌萌哒", value: 19},
                    {name: "坚持", value: 19},
                    {name: "话唠", value: 19},
                    {name: "果粉", value: 18},
                    {name: "喵星人", value: 18},
                    {name: "花粉", value: 18},
                    {name: "衬衫控", value: 18},
                    {name: "宅男", value: 17},
                    {name: "小清新", value: 17},
                    {name: "眼镜男", value: 17},
                    {name: "琼瑶", value: 17},
                    {name: "穷游党", value: 16},
                    {name: "铲屎官", value: 16},
                    {name: "正太", value: 16},
                    {name: "中二病", value: 16},
                    {name: "夜猫子", value: 15},
                    {name: "逗比", value: 15},
                    {name: "腹黑", value: 15},
                    {name: "吃鸡", value: 15},
                    {name: "为了联盟", value: 14},
                    {name: "背包客", value: 14},
                    {name: "民谣", value: 14},
                    {name: "为了部落", value: 14},
                    {name: "懒癌患者", value: 13},
                    {name: "追剧", value: 13},
                    {name: "IT民工", value: 13},
                    {name: "CNB成员", value: 13},
                    {name: "选择困难", value: 12},
                    {name: "锤粉", value: 12},
                    {name: "欧皇", value: 12},
                    {name: "仙气十足", value: 12}
                ]
            }]
        });

        /** 窗口大小改变事件 */
        window.onresize = function () {
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
            myCharts4.resize();
            myCharts5.resize();
        };

    });
</script>
</body>
</html>
